<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:common="http://www.contact.common.com/contacts/ui"
      xmlns:a4j="http://richfaces.org/a4j">

<ui:component>

    <!--@elvariable id="id" type="java.lang.String"-->
    <!--@elvariable id="reRender" type="java.lang.String"-->
    <!--@elvariable id="oncomplete" type="java.lang.String"-->
    <style type="text/css">
        .top {
            vertical-align: top;
        }
    </style>

    <common:modalPanel id="#{id}"
                       header="#{photosSessionBean.header}"
                       bean="#{photosBean}"
                       submitButton="#{resources.addLabel}"
                       reRender="#{reRender}"
                       oncomplete="#{oncomplete}"
            >

        <ui:define name="panelBody">
            <h:panelGrid columns="2" rowClasses="top, top, top">
                <h:outputLabel value="#{resources.nameLabel}"/>
                <h:inputText style="widht:200px"
                              id="albumName"
                             value="#{photosSessionBean.focusedAlbum.name}"
                             validatorMessage="Album name are not valid."
                             required="true"
                             requiredMessage="You must have a album name">
                    <f:validator validatorId="alphaValidator"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>


                <h:outputLabel value="#{resources.locationLabel}"/>
                <h:inputText style="widht:200px" value=""/>

                <h:outputLabel value="#{resources.descriptionLabel}"/>
                <h:inputTextarea style="widht:200px" rows="4" value="#{photosSessionBean.focusedAlbum.description}"/>
            </h:panelGrid>
        </ui:define>


    </common:modalPanel>


</ui:component>


</html>